<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>每日奖励</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        #app{
            min-height:100vh;
            width:100vw;
            background:url(../../../image/my/everyDayBg.jpg)no-repeat top center;
            background-size:contain;
            background-color:#FD655C;
            padding-bottom:0.8rem;
        }
        .text{
            padding-top:1rem;
        }
        .text img{
            display: block;
            margin:0px auto;
        }
        .text img:nth-child(1){
            width:70%;
        }
        .text img:nth-child(2){
            width:75%;
            margin-top:0.55rem;
        }
        .day_content{
            background:#FFF;
            width:85%;
            margin:0px auto;
            border-radius:0.6rem;
            margin-top:1.7rem;
            padding:0.6rem 0.4rem 0.5rem 0.4rem;
        }
        .day_content .li{
            padding-bottom:0.5rem;
            margin-bottom:0.5rem;
            border-bottom:1px solid #F9F9F9;
        }
        .day_content .li:nth-last-child(1){
            margin-bottom:0;
            padding-bottom:0;
            border-bottom:0;
        }
        .day_content .li>i{
            width:0.5rem;
            height:0.5rem;
            line-height:0.5rem;
            border-radius:50%;
            text-align:center;
            background:#FD655C;
            color:#FFF;
            display:block;
        }
        .day_content .li>.info{
            padding:0px 0.25rem;
        }
        .day_content .li>.info h3{
            font-weight:normal;
            color:#333;
            font-size:0.3rem;
            line-height:0.35rem;
        }
        .day_content .li>.info span{
            color:#9a9a9a;
            font-size:0.3rem;
            display: block;
            line-height:0.5rem;
            margin-top:0.25rem;
        }
        .day_content .li>.info span font{
            color:#F30;
        }
        .day_content .li>button{
            background:#FD655C;
            color:#FFF;
            font-size:0.26rem;
            width:1.65rem;
            height:0.55rem;
            line-height:0.55rem;
            border-radius:1rem;
            margin-top:0.23rem;
            white-space: nowrap;
            /* box-shadow: 0px 0px 7px #FB655C; */
        }
        .day_content .li>button:active{
            opacity: 0.8;
        }
        .day_content .li>button.disabled{
            background:#c3c3c3;
            //box-shadow: 0px 0px 7px #7A7A7A;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="text">
            <img src="../../../image/my/everyDayText1.png" />
            <img src="../../../image/my/everyDayText2.png" />
        </div>
        <div class="day_content">
            <div class="li disbox">
                <i>1</i>
                <div class="info disflex">
                    <h3 class="ell">每日完成{{(todayWard.a.firstphaseTaskcount) || '-'}}个任务</h3>
                    <span class="ell">额外奖励
                        <font>
                            {{(todayWard.a.firstphaseTaskreward/10000) || '-'}}元
                        </font>
                    </span>
                </div>
                <button
                    :class="{'disabled': !todayWard.a.is_accept }"
                    @click="darwReward('a')"
				>
                    {{todayWard.a.content || "加载中"}}
                </button>
            </div>
            <div class="li disbox">
                <i>2</i>
                <div class="info disflex">
                    <h3 class="ell">每日完成{{(todayWard.b.secondphaseTaskcount) || '-'}}个任务</h3>
                    <span class="ell">额外奖励
                        <font>
                            {{(todayWard.b.secondphaseTaskreward/10000) || '-'}}元
                        </font>
                    </span>
                </div>
                <button
                    :class="{'disabled': !todayWard.b.is_accept }"
                    @click="darwReward('b')"
                >
                    {{todayWard.b.content || "加载中"}}
                </button>
            </div>
            <div class="li disbox">
                <i>3</i>
                <div class="info disflex">
                    <h3 class="ell">每日完成{{(todayWard.c.thirdphaseTaskcount) || '-'}}个任务</h3>
                    <span class="ell">额外奖励
                        <font> {{(todayWard.c.thirdphaseTaskreward/10000) || '-'}}元</font>
                    </span>
                </div>
                <button
                    :class="{'disabled': !todayWard.c.is_accept }"
                    @click="darwReward('c')"
                >
                    {{todayWard.c.content || "加载中"}}
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    todayWard: {a:{},b:{},c:{}},
                    finishNums: 0,
                },
                mounted(){
					$.initJs(this);
                    this.getUserTodayRewardAPi();
                },
                methods:{
                    darwReward(index) {
                        let curWard = this.todayWard[index];
                        if (!curWard.is_accept) {
                            $.toast(this.todayWard[index].toastMsg + '哦');
                            return;
                        }
                        this.darwRewardApi(index);
                    },
                    darwRewardApi(index) {
                        let _self = this;
                        let rewardId = 0;
                        if (index === 'a') {
                            rewardId = 101;
                        }
                        if (index === 'b') {
                            rewardId = 102;
                        }
                        if (index === 'c') {
                            rewardId = 103;
                        }
                        $.comRequest('post','/user/today/taskrewarde',{
                            reward_id: rewardId
                        },(res)=>{
                            $.toast('领取成功');
                            _self.todayWard[index].is_accept = 0;
                            _self.parseReward(_self.todayWard);
							api.sendEvent({name: 'updateMyIndexPage'});
                        },(ero)=>{
                            $.toast(ero.message);
                        });
                    },
                    getUserTodayRewardAPi() {
                        let _self = this;
                        $.comRequest('get','/user/today/taskrewarde',{},(res)=>{
                            let { data } = res;
                            _self.finishNums = data.count;
                            _self.parseReward(data);
                        },(ero)=>{
                            $.toast(ero.message);
                        },true);
                    },
                    parseReward(reward) {
                        const a = 'a';
                        const b = 'b';
                        const c = 'c';
                        let finishNums = this.finishNums;
                        if (reward[a]) {
                            reward[a].toastMsg = '未达标';
                            reward[a].content = '未达标 '+finishNums+'/'+reward[a].firstphaseTaskcount;
                            if(finishNums >= reward[a].firstphaseTaskcount){
                                reward[a].toastMsg = reward[a].is_accept == 1 ? '立即领取' : '已领取';
                                reward[a].content = reward[a].is_accept == 1 ? '立即领取' : '已领取';
                            }
                        }
                        if (reward[b]) {
                            reward[b].toastMsg = '未达标';
                            reward[b].content = '未达标 '+finishNums+'/'+reward[b].secondphaseTaskcount;
                            if(finishNums >= reward[b].secondphaseTaskcount){
                                reward[b].toastMsg = reward[b].is_accept == 1 ? '立即领取' : '已领取';
                                reward[b].content = reward[b].is_accept == 1 ? '立即领取' : '已领取';
                            }
                        }
                        if (reward[c]) {
                            reward[c].toastMsg = '未达标';
                            reward[c].content = '未达标 '+finishNums+'/'+reward[c].thirdphaseTaskcount;
                            if(finishNums >= reward[c].thirdphaseTaskcount){
                                reward[c].toastMsg = reward[c].is_accept == 1 ? '立即领取' : '已领取';
                                reward[c].content = reward[c].is_accept == 1 ? '立即领取' : '已领取';
                            }
                        }
                        this.todayWard = reward;
                    }
                },
            });
        }
    </script>
</body>
</html>
